<template>
	<view>
		<view>
			<div style="width:100%;color:white;height:32px;margin:auto;text-align: center;background-color:#166CEE; line-height: 32px;">
				<div style="width:100%;margin:auto;height:24px;font-size:13px;color:white;font-family:'黑体';" id="mainCOUNT">
					<span style="line-height: 22px;font-size: 12px;"><img src="../../../static/tuli/gq_green_1.png" style="width: 15px ; height: 9px;">&nbsp;开（{{kzCount}}）</span>
					<span style="line-height: 22px;font-size: 12px;"><img src="../../../static/tuli/gq_red_1.png" style="width: 15px ; height: 9px;">&nbsp;关（{{gzCount}}）</span>
					<span style="line-height: 22px;font-size: 12px;"><img src="../../../static/tuli/gq_blur_1.png" style="width: 15px ; height: 9px;">&nbsp;异常或检修（{{wxCount}}）</span>
				</div>
			</div>
		</view>
		<!-- <u-line style="padding-top: 16rpx;" class="u-line" :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line> -->
		<view class="page-box">
			<view  class="order" v-for="(item,index) in result" :key="index" :padding="padding" :border="border" @click="btnClick(item.STCD)">
				<view class="bottom">
					<view class="logistics btn">{{item.STNM}}</view>
				</view>	
				<view class="bottom" style="padding-top: 16rpx;">
					<view class="logistics btn">水位：{{item.UPZ}} m</view>
					<view class="evaluate btn">时间：{{ undefined != item.TM ? $u.timeFormat(formatTime.convertToDate(item.TM),'mm-dd hh:MM') : "—" }}</view>
				</view>
				<view class="bottom">
					<view class="logistics btn" v-if="item.listItemColorZ.length > 0 ? true : false">
						<view style="margin-top: 10px;"><text style="vertical-align: middle;">闸门状态：</text></view>
						<i v-for="(item1,index1) in item.listItemColorZ" :key="index1" :class="item1">
						</i>
					</view>
					<view class="evaluate btn" v-if="item.listItemColor.length > 0 ? true : false">
						<view style="margin-top: 10px;"><text style="vertical-align: middle;">泵站状态：</text></view>
						<i v-for="(item1,index1) in item.listItemColor" :key="index1" :class="item1">
						</i>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getgqInfo } from '../api/api.js'
	export default {
		data() {
			return {
				ImgWidth: '30',
				ImgHeight: '18',
				kzCount:0,
				gzCount:0,
				wxCount:0,
				
				result: [],
				borderColor: '#e4e7ed',
				align: 'center',
				border: true,
				padding:20,
				
				direction: 'row',
				hairLine: true,
				length: '100%',
				color: '#DDDDDD',
				borderStyle: 'solid'
			}
		},
		onLoad(options) {
			
		},
		mounted() {
			this.search();
		},
		methods: {
			search() {
				var _data = {
					TREEID: "2020091714462130772"
				};
				var _param = {}
				_param.data = _data;
				getgqInfo(_param).then(res => {
					this.result = res.data;
					var listData = this.result;
					// this.sum = 0;
					for(var i= 0 ;i< listData.length; i++) {
						var item = listData[i];
						var bs = undefined != item.OMCNUM ? Number(item.OMCNUM) : Number("0");
						var ks = undefined != item.GTOPNUM ? Number(item.GTOPNUM) : Number("0");
						var listItem = item.ST_GATE_R;
						item.listItemColor = this.p.GetGateOMCNUM(bs,listItem);
						item.listItemColorZ = this.p.GetGateGTQNUM(ks,listItem);
						item.STATUS = bs > 0 || ks > 0 ? true : false;
						if(undefined != listItem && listItem.length > 0){
							item.TM = listItem[0].TM;
						}
						var OMCN 
						if(undefined != listItem && listItem.length > 0){
							var temAgg = [];
							temAgg = item.listItemColorZ.filter(function (e) {
								return e == "gqGreenZ";
							});
							OMCN = temAgg.length;
							if (temAgg.length == 0) {
								temAgg = item.listItemColor.filter(function (e) {
									return e == "gqGreen";
								});
							}
						}else {
							OMCN = undefined;
						}
						
						if (OMCN == undefined) {
							this.wxCount++;
						}
						else if (OMCN == 0) {
							this.gzCount++;
						}
						else {
							this.kzCount++;
						}
					}
				})

			},
			btnClick(obj) {
				console.log(obj)
				var temAgg = this.result.filter(function (e) {
					return e.STCD == obj;
				});
				if(temAgg.length > 0){
					var item = temAgg[0]
					console.log(JSON.stringify(item))
					var bs = undefined != item.OMCNUM ? Number(item.OMCNUM) : Number("0");
					var ks = undefined != item.GTOPNUM ? Number(item.GTOPNUM) : Number("0");
				}
			},
			confirm(e) {
				this.stime = '';
				if (this.pickermode == 'time') {
					if (this.params.year) this.stime += e.year;
					if (this.params.month) this.stime += '-' + e.month;
					if (this.params.day) this.stime += '-' + e.day;
					if (this.params.hour) this.stime += ' ' + e.hour;
					if (this.params.minute) this.stime += ':' + e.minute;
					if (this.params.second) this.stime += ':' + e.second;
				}
				this.search();
			}
		}
	}
</script>

<style scoped lang="scss">

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
	
	
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		
		border: 2rpx solid $u-border-color;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-warning-dark;
			}
		}
		.item {
			display: flex;
			margin: 20rpx 0 0;
			.left {
				margin-right: 20rpx;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
		
		.bottom {
			display: flex;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
			
			.btn {
				width: 360rpx;
				text-align: center;
				color: $u-type-info-dark;
				
			}
			.logistics{
				display: flex;
				// flex: 1;
				font-size: 26rpx;
				text-align: left;
				color: black;
				.gqRedZ {
					display: inline-block;
					width: 10px;
					height: 10px;
					margin: 15px auto;
					border: 1px solid #A1A1A1;
					border-radius: 20%;
					background-color: #A1A1A1;
				}
				.gqGreenZ {
					display: inline-block;
					width: 10px;
					height: 10px;
					margin: 15px auto;
					border: 1px solid #00DB00;
					border-radius: 20%;
					background: rgba(0,219,0,0.7);
				}
				.gqXiuZ {
					display: inline-block;
					width: 10px;
					height: 10px;
					margin: 15px auto;
					border: 1px solid #CDCDCD;
					border-radius: 20%;
					background: #CDCDCD;
				}
			}
			
			.evaluate {
				display: flex;
				// flex: 1;
				font-size: 26rpx;
				text-align: left;
				color: black;
				.gqRed {
					display: inline-block;
					width: 10px;
					height: 10px;
					margin: 15px auto;
					border: 1px solid #A1A1A1;
					border-radius: 50%;
					background-color: #A1A1A1;
				}
				.gqGreen {
					display: inline-block;
					width: 10px;
					height: 10px;
					margin: 15px auto;
					border: 1px solid #00DB00;
					border-radius: 50%;
					background: rgba(0,219,0,0.7);
				}
				.gqXiuZ {
					display: inline-block;
					width: 10px;
					height: 10px;
					margin: 15px auto;
					border: 1px solid #CDCDCD;
					border-radius: 50%;
					background: #CDCDCD;
				}
			}
		}
	}
</style>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	/* background-color: #f2f2f2; */
	background-color: $u-bg-color;
}

.div-circle {
	width: 130px;
	height: 130px;
	border: 6px solid #007AFF;
	border-radius: 50%;
	/*text-align: center;	*/
}
.div-class-title {
	line-height: 30px;
	font-size: 18px;
}
/* #endif */
</style>
